<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>题库专家</title>
  <link rel="stylesheet" href="../assect/css/util.css">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <!-- <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="../assect/js/pagination.js"></script>
  <!-- <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> -->
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <span>
      <div class="menu-icon"></div>
    </span>
    <p class="outLogin">退出登陆</p>
  </div>
  <!-- 侧边导航 -->
  <div id="canvas-warp">
    <div class="nav">
      <ul class="nav-ul">
        <li class="nav-font">
          <p>激活码管理</p>
          <ul class="son-nav">
            <a href="../index.html">
              <li>激活码列表</li>
            </a>
            <a href="./activeRecord.html">
              <li>激活记录</li>
            </a>
          </ul>
        </li>
        <li class="nav-font">
          <p>用户管理</p>
          <ul class="son-nav">
            <a href="./userList.html">
              <li>用户列表</li>
            </a>
            <a href="./feedback.html">
              <li>用户反馈</li>
            </a>
            <a href="./loginJournal.html">
              <li>登陆日志</li>
            </a>
            <a href="./commentList.html">
              <li>评论列表</li>
            </a>
          </ul>
        </li>
        <li class="nav-font">
          <p>订单管理</p>
          <ul class="son-nav">
            <a href="./userOrder.html">
              <li>用户订单</li>
            </a>
            <a href="./agentOrder.html">
              <li>代理订单</li>
            </a>
          </ul>
        </li>
      </ul>
    </div>
    <div class="mask"></div>
  </div>
  <!-- 内容区域 -->
  <div class="content">
    <div class="content-box">
      <div class="title">
        <p>激活码生成</p>
        <p class="jump-bank" onclick="javascript:history.back(-1);">返回</p>
      </div>
      <div class="content-box-con">
        <!-- 主分类 -->
        <div>
          <span>主分类</span>
          <select>
            <option value="">工程类考试</option>
            <option value="">财务会计</option>
            <option value="">医药卫生</option>
            <option value="">从业资格</option>
            <option value="">公务员</option>
            <option value="">学历类</option>
            <option value="">其他考试</option>
          </select>
        </div>
        <!-- 子分类 -->
        <div>
          <span>子分类</span>
          <select>
            <option value="">一级建造师</option>
            <option value="">二级建造师</option>
            <option value="">一级造价工程师</option>
            <option value="">注册咨询工程师</option>
            <option value="">注册安全工程师</option>
            <option value="">监理工程师</option>
            <option value="">注册消防工程师</option>
          </select>
        </div>
        <!-- 题库 -->
        <div>
          <span>题库</span>
          <select>
            <option value="">一建建设工程法规</option>
            <option value="">一建建设工程项目管理</option>
            <option value="">一建建设工程经济</option>
            <option value="">一建建筑工程管理与实务</option>
            <option value="">一建市政公用工程管理与实务</option>
            <option value="">一建公路工程管理与实务</option>
            <option value="">一建水利工程管理与实务</option>
          </select>
        </div>
        <!-- 类型 -->
        <div>
          <span>类型</span>
          <select>
            <option value="">永久</option>
            <option value="">1年</option>
          </select>
        </div>
        <!-- 激活码生成数量 -->
        <div>
          <span>激活码生成数量</span>
          <input type="text" placeholder="评论内容">
        </div>
      </div>
      <div class="content-box-btn btn-new">
        <button>保存</button>
      </div>
    </div>
  </div>
  <!-- 分页 -->
  <!-- <script>
    const pageSize = 4
    const dataCount = 16
    const pager = new Pagination('.page-container', {
      pageSize: pageSize,
      autoLoad: true,
      toPage: function (index, _pageSize) {
        // 设置记录总数，用于生成分页HTML内容
        if (index === 0 || _pageSize) this.updateCount(dataCount, _pageSize)

        // 根据页码以及分页大小生成html内容
        let pageListHtml = ''
        for (var i = 0; i < (_pageSize || pageSize); i++) {
          pageListHtml += `
            <div class="col-md-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Card - ${index * (_pageSize || pageSize) + i + 1}</h5>
                  <p class="card-text">card-text,card-text,card-text,card-text</p>
                </div>
              </div>
            </div>
          `
        }
        $('.page-list').html(pageListHtml)
      }
    })
  </script> -->

  <script>
    $(function () {
      $('#canvas-warp').hide();
      $('.son-nav').hide();
      // 点击图标，显示导航
      $('.menu-icon').click(function () {
        $('#canvas-warp').toggle(300);
      })
      // 点击遮罩，隐藏导航
      $('.mask').click(function () {
        $('#canvas-warp').toggle(300);
      })
      $('.nav-font').click(function (event) {
        $(this).children('.son-nav').toggle(300);
        $(this).siblings().children('.son-nav').hide(300);
      });
      // 退出登录
      $('.outLogin').click(function () {
        $(location).attr('href', '../login.html');
      })
    })
  </script>
</body>

</html>